import axios from "axios";
import Script from 'next/script'
import React, { useEffect, useState } from "react";
import styles from './testPC.module.less';
import { Card, message, Button, Modal, Spin } from "antd";
import { PCHead } from "../../../components";

const TestPC: React.FC = () => {

    const [visible, setVisible] = useState(false);

    const fetchData = async () => {
        const res:any = await axios.get('/api/day1/student?id=1');
        if (!res) return;
        if(res.code == 0) {
            message.info(JSON.stringify(res.data))
        }else {
            message.warn(res.data)
        }
    }

    useEffect(() => {
        fetchData();
    }, [])

    return <div className={styles.container}>
        <PCHead />
        <div className={styles.text}>less style is work?</div>
        <Card
            title="card 演示"
        >
            <p>PC antd style 1.1</p>
            <Button onClick={() => setVisible(true)}>antd button</Button>
        </Card>
        <Modal
            title="modal 演示"
            visible={visible}
            onCancel={() => setVisible(false)}
        >
            <Spin />
        </Modal>
        <Script
            src="https://ssl.captcha.qq.com/TCaptcha.js"
            onLoad={() => {
                console.log('captcha script loaded!')
            }}
        />
    </div>
}

export default TestPC;